<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :number1="message" :number2="name"
  @num1change="num1change" @num2change="num2change"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>date:{{dnumber1}}</h2>
<!--    <input type="text" v-model="dnumber1">-->
    <INPUT type="text" :value="number1" @input="dnumber1input">
    <h2>props:{{number2}}</h2>
    <h2>date:{{dnumber2}}</h2>
<!--    <input type="text" v-model="dnumber2">-->
    <INPUT type="text" :value="number2" @input="dnumber2input">
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'123',
      name:'321',
    },
    methods: {
      num1change(value){
        this.message=value
      },
      num2change(value){
        this.name=value
      }
    },
    components:{
      cpn:{
        template:`#cpn`,
        props:{
          number1:String,
          number2:String
        },
        data(){
          return{
            dnumber1:this.number1,
            dnumber2:this.number2
          }
        },
        methods:{
          dnumber1input(event){
            this.dnumber1 = event.target.value
            this.$emit('num1change',this.dnumber1)
          },
          dnumber2input(event){
            this.dnumber2 = event.target.value
            this.$emit('num2change',this.dnumber2)
          }
        }
      }
    }
  })
</script>
</body>
</html>